import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Select, Tooltip,Table, Popconfirm, message, Modal } from 'antd';
import {getKnowledge,serchKnowledge} from '@/services/index';
import {RootObject2} from '@/utils/comments';
import { SettingOutlined ,EditOutlined,CloudDownloadOutlined ,DeleteOutlined} from '@ant-design/icons';
import DoubleDesk from '@/components/doubleDesk';
const { Option } = Select;

import './Knowledge.less';

const Knowledge:React.FC = ()=>{
    const [form] = Form.useForm();
    const [list,setList] = useState<RootObject2[]>([]);    // 知识小册数据
    const [visible, setVisible] = useState(false); 
    let [objs,setObjs] = useState({} as RootObject2);

    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    
    useEffect(()=>{
        getKnowledge().then(res=>{
            setList(res.data[0])
            
        })
    },[])

    // 搜索
    const onFinish = (values: any) => {
        console.log(values);
        serchKnowledge({page: 1,pageSize: 12,...values}).then(res=>{
            console.log('搜索......',res.data[0])
            setList(res.data[0]);
        })
    };
    // 重置
    const onReset = () => {
        form.resetFields();
    };
    // 错误提示
    function confirm() {
        message.warning('访客无权进行该操作');
    }

    // 打开弹框
    const changeFlag=(item:any)=>{
        setVisible(true)
        setObjs(item)
    }
    // 关闭弹框
    const onclose=()=>{
        setVisible(false)
    }

    return <div className='knowledge'>
        <div className="knowledge_head">
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item name="title" label="名称" style={{ width: '300px',textAlign: "left"}}>
                    <Input placeholder="请输入知识库名称" />
                </Form.Item>
                <Form.Item name="status" label="状态" style={{ width: '260px', textAlign: "left" }}>
                    <Select placeholder="请选择" allowClear>
                        <Option value="female">已发布</Option>
                        <Option value="other">草稿</Option>
                    </Select>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        </div>
        <div className="knowledge_main">
            {
                list && list.map((item,index)=>{
                    return <div key={item.id}>
                        <div className="imgs">
                            <img src={item.cover} alt="" />
                        </div>
                        <div className='txt'>
                            <p>{item.title}</p>
                            <p>{item.summary}</p>
                        </div>
                        <ul className='icos'>
                            <li><EditOutlined /></li>
                            <li onClick={()=>message.warning('访客无权进行该操作')}>
                                <Tooltip title="设为草稿">
                                    <CloudDownloadOutlined />
                                </Tooltip>
                            </li>
                            <li><SettingOutlined onClick={()=>{changeFlag(item)}} /></li>
                            <li>
                                <Popconfirm
                                    title="确认删除这个评论?"
                                    okText="确认"
                                    onConfirm={confirm}
                                    cancelText="取消"
                                >
                                    <DeleteOutlined />
                                </Popconfirm>
                            </li>
                        </ul>
                    </div>
                })
            }
        </div>
        <DoubleDesk visible={visible} onclose={onclose} summary={objs.summary} title={objs.title} isCommentable={objs.isCommentable} cover={objs.cover} />
    </div>
}

export default Knowledge;